<template>
    <div class="login" id="login-app">
        <div class="login-box">
            <img src="@/assets/login/login-l.png" alt="">
            <div class="login-form" style="padding-bottom: 30px;">
                <el-form ref="userForm" :model="user" :rules="rules">
                    <div class="login-form-title">
                        <img src="@/assets/login/logo.png" style="width:170px;height:170px;" alt=""/>
                    </div>
                    <el-form-item prop="username">
                        <el-input v-model="user.username" type="text" auto-complete="off" placeholder="账号"
                                  maxlength="20"
                                  prefix-icon="el-icon-user"/>
                    </el-form-item>
                    <el-form-item prop="password">
                        <el-input v-model="user.password" type="password" placeholder="密码" prefix-icon="el-icon-lock"
                                  maxlength="20"
                                  show-password/>
                    </el-form-item>
                    <el-form-item prop="code">
                        <el-input v-model="user.code" auto-complete="off" placeholder="验证码"
                                  style="width:50%;margin-right: 3px;" prefix-icon="el-icon-success">
                        </el-input>
                        <img :src="codeUrl" @click="getCode" style="cursor: pointer;width: 110px;">
                    </el-form-item>
                    <el-form-item style="width:100%;" class="all_btn">
                        <div style="text-align:center;margin-top: 0px;">
                            <el-button :loading="loading" class="login-btn"
                                       size="small" type="primary" native-type="submit"
                                       style="margin-top: 10px;"
                                       @click.native.prevent="login" round>
                                <span v-if="!loading">登录</span>
                                <span v-else>登录中...</span>
                            </el-button>
                        </div>
                        <div style="text-align:center;margin-top: 20px">
                            <el-link type="primary" @click="$router.push('/register')" style="margin-right: 35px;">
                                立即注册
                            </el-link>
                            <el-link type="primary" @click="$router.push('/find')" style="margin-left: -5px;">忘记密码
                            </el-link>
                            <!-- 				<el-button type="primary" style="margin-left: auto" size="small"
                                      class="login-btn" autocomplete="off" @click="$router.push('/register')" round>注册</el-button> -->
                        </div>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>
</template>

<script>
    import {validateUser, getCodeImg} from '@/api/administrator.js'

    export default {
        name: "Login",
        data() {
            return {
                codeUrl: '',
                resCode: '',
                user: {
                    username: 'admin',
                    password: '123',
                    code: ''
                },
                loading: false,
                code: 0,
                rules: {
                    username: [
                        {required: true, message: '请输入用户名', trigger: 'blur'},
                        {min: 3, max: 10, message: '长度在 3 到 5 个字符', trigger: 'blur'}
                    ],
                    password: [
                        {required: true, message: '请输入密码', trigger: 'blur'},
                        {min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur'}
                    ],
                }
            }
        },
        methods: {
            login() {
                this.$refs.userForm.validate(async (valid) => {
                    if (valid) {
                        console.log(this.resCode - this.user.code)
                        // console.log(JSON.stringify(this.user.code))
                        if (this.user.code == '') {
                            console.log(this.resCode)
                            this.$message.error("验证码不能为空！")
                            this.getCode()
                            return false
                        }
                        if (this.resCode - this.user.code != 0) {
                            console.log(this.resCode - this.user.code == 0)
                            this.$message.error("验证码输入错误！")
                            this.getCode()
                            return false
                        }
                        await validateUser(this.user).then(res => {
                            this.code = res.data.code
                            if (this.code == '1') {
                                if ((res.data.administrator.permission == '0') && (res.data.administrator.role == 'common')) {
                                    this.$message.error('没有权限，请等待超级管理员批准！')
                                    return false
                                }
                                this.loading = true
                                localStorage.setItem("user", JSON.stringify(res.data.administrator))  // 存储用户信息到浏览器
                                // localStorage.setItem("menus", JSON.stringify(res.data.menus))  // 存储用户信息到浏览器
                                this.$router.push('/home/usermannage')
                                this.$message.success({message: '登陆成功'})
                            } else {
                                this.loading = false
                                this.$message.error('账号或密码错误')
                                this.getCode()
                            }
                        }).catch(err => {
                            this.$message.error('请求出错了：' + err)
                            this.getCode()
                        })
                    }
                })
            },
            getCode() {
                getCodeImg().then(resp => {
                    if (resp && resp.status === 200) {
                        this.codeUrl = resp.data.img
                        this.resCode = resp.data.result
                        // console.log(this.resCode)
                    }
                })
            },
        },
        created() {
            this.getCode()
            console.log(this.resCode)
        }
    }
</script>

<style>
    .login {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        background: url("../assets/login/background.jpg") no-repeat center
        /* background-color: #333; */
    }

    .login-box {
        width: 900px;
        height: 450px;
        border-radius: 8px;
        display: flex;
    }

    .login-box img {
        width: 60%;
        height: auto;
    }

    .title {
        margin: 0px auto 30px auto;
        text-align: center;
        color: #707070;
    }

    .login-form {
        background: #ffffff;
        width: 40%;
        border-radius: 0px 8px 8px 0px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .login-form .el-form {
        width: 250px;
        height: 350px;
    }

    .login-form .el-form-item {
        margin-bottom: 30px;
    }

    .login-form .el-form-item.is-error .el-input__inner {
        border: 0 !important;
        border-bottom: 1px solid #fd7065 !important;
        background: #fff !important;
    }

    .login-form .input-icon {
        height: 32px;
        width: 18px;
        margin-left: -2px;
    }

    .login-form .el-input__inner {
        border: 0;
        border-bottom: 1px solid #e9e9e8;
        border-radius: 0;
        font-size: 15px;
        font-weight: 400;
        color: #4a4a4a;
        height: 32px;
        line-height: 32px;
    }

    .login-form .el-input__prefix {
        left: 0;
    }

    .login-form .el-input--prefix .el-input__inner {
        padding-left: 26px;
    }

    .login-form .el-input__inner::placeholder {
        color: #aeb5c4;
    }

    .login-form .el-form-item--medium .el-form-item__content {
        line-height: 32px;
    }

    .login-form .el-input--medium .el-input__icon {
        line-height: 32px;
    }

    .all_btn {
        margin-top: 0;
    }

    .login-form-title {
        height: 36px;
        display: flex;
        justify-content: center;
        /* 居中 */
        align-items: center;
        margin-bottom: 40px;
    }

    .login-form-title .title-label {
        font-weight: 500;
        font-size: 20px;
        color: #333333;
        margin-left: 10px;
    }

</style>
